<template>
	<!-- 工单审核列表 -->
	<div class="content">
		<div class="content-top">
			工单管理_工单审核
		</div>
		<div class="content-operation">
		</div>
		<div class="content-search">
			<el-form :inline="true" class="demo-form-inline" style="margin-top: 20px;">
				<el-form-item label="工单标题">
					<el-input placeholder="工单标题"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" icon="el-icon-search">搜索</el-button>
				</el-form-item>
			</el-form>
		</div>
		<div class="content-table">
			<el-table :data="tableData" show-header stripe style="width: 100%;">
				<el-table-column prop="title" label="工单标题" width="300">
				</el-table-column>
				<el-table-column prop="content" label="工单内容" width="700">
				</el-table-column>
				<el-table-column prop="type" label="工单类型" width="200">
					<template slot-scope="scope">
						<span v-if="scope.row.type == item.value" v-for='item in dict.type'>{{item.type}}</span>
					</template>

				</el-table-column>
				<el-table-column prop="status" label="工单状态" width="200">
					<template slot-scope="scope">
						<span v-if="scope.row.status == item.value" v-for='item in dict.status'>{{item.type}}</span>
					</template>

				</el-table-column>
				<el-table-column fixed="right" label="查看" width="100">
					<template slot-scope="scope">
						<el-button @click="handleClick(scope.row,1)" v-if="has_detail" type="text" size="small">查看详情</el-button>
					</template>
				</el-table-column>
				<el-table-column fixed="right" label="操作" width="100">
					<template slot-scope="scope">
						<el-button @click="handleClick(scope.row,2)" v-if="has_edit && scope.row.status == 0" type="text" size="small">点击受理</el-button>
						<el-button @click="handleClick(scope.row,2)" v-if="has_edit && scope.row.status == 3" type="text" size="small">点击审核</el-button>
						<el-button @click="handleClick1(scope.row)" v-if="has_del" type="text" size="small"><i class="el-icon-delete"></i></el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<div class="content-page">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="page"
			 :page-size=limit layout="prev, pager, next, jumper" :total=total>
			</el-pagination>
		</div>

		<template v-if="is_edit">
			<div class="all-screen"></div>
			<div class='add-box'>
				<WorkFormCheck @saveEdit='saveEdit' :flag='flag' :id='id'></WorkFormCheck>
			</div>
		</template>
	</div>
</template>

<script>
	import WorkFormCheck from '@/components/workform/WorkFormCheck.vue'
	import Global from '@/components/Global.vue'
	export default {
		components: {
			WorkFormCheck: WorkFormCheck,
		},
		props: ['power'],
		data() {
			return {
				id: 'id',
				flag:0,
				is_add: false,
				is_edit: false,
				tableData: [],
				limit: 10,
				page: 1,
				total: 1,
				dict: '',
				has_detail: false,
				has_edit: false,
				has_del: false,
				

			}
		},
		mounted() {
			this.check_power();
			this.get_dict();
			this.get_list();
		},
		methods: {
			check_power() {
				var self = this;
				this.power.forEach(function(element) {
					if (element.permissionName.indexOf("审核") != -1) self.has_edit = true;
					if (element.permissionName.indexOf("删除") != -1) self.has_del = true;
					if (element.permissionName.indexOf("详情") != -1) self.has_detail = true;
				});
			},
			get_dict() {
				var self = this;
				this.$axios.get(this.$global.serverIp + 'admin/dict/findDict?keyword=work')
				  .then(function (res) {
					  if(res != '')
						self.dict = res.data;
				  })
			},
			get_list() {
			
				var self = this;
				this.$axios.post(this.$global.serverIp + 'work/workform/findPage', {
				 "page": {
				 	"size": self.limit,
				 	"current":self.page,
				 	"orders":[{"column":"create_date","asc":false}]
				 },
				 "params":{
				 }
				  })
				  .then(function (res) {
					  if(res != ''){
						  self.tableData = res.data.records;
						  self.total = res.data.total;
						  self.page = res.data.current;
					  }
						
				  })
			},
			saveEdit(type) {
				if (type == 2) {
					this.get_list();
				}
				this.is_edit = false;
			},
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
			},
			handleCurrentChange(val) {
				this.page = val;
				this.get_list();
				console.log(`当前页: ${val}`);
			},
			handleClick(row,flag) {
				this.id = row.id;
				this.flag = flag;
				this.is_edit = true;
			},
			handleClick1(row) {
				this.delopen(row);
			},
			delopen(row) {
				var self = this;
				this.$confirm('此操作将删除该工单, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					$.ajax({
						url: Global.serverIp + 'work/workform/delete',
						data: '["' + row.id + '"]',
						xhrFields: {
							withCredentials: true
						},
						beforeSend: function(request) {
							request.setRequestHeader("Authorization", 'Bearer ' + localStorage.getItem('token'));
						},
						contentType: 'application/json;charset=utf-8',
						dataType: 'json',
						type: 'delete',
						success: function(res) {
							if (res.code == Global.success_code) {
								console.log(res);
								self.$popup.open("删除成功");
								self.get_list();
								self.get_tree();
							} else {
								self.$popup.open(res.msg);
							}
						},
						error: function(res) {
							if (res.responseJSON.code == '040005') {
								self.$popup.open("登录过期");
							} else {
								self.$popup.open("请求失败");
							}
						}
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
		},

	}
	import '@/assets/css/common.css'
</script>
